<template>
	<div>
		<!-- <h1>电台</h1> -->
		<div class="studio">
			<div class="studiohead">
				<div class="iconfont icon-fanhuipt" @click="$router.push('/userInfo')"></div>
				<p>广播电台</p>
			</div>

			<div class="studioContent">
				<ul>
					<li v-for="item,index in dataList" :key="index">
						<div class="img">
							<img :src="item.picUrl" />
						</div>

						<div class="font">
							<p>{{item.name}}</p>
							<span>{{item.copywriter}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getPersonalized
	} from "../../api/myself";
	export default {
		data() {
			return {
				dataList: null
			}
		},
		created() {
			this.$emit("getnavs-btn", false);
			this.getPersonalizedFun();
		},
		methods: {
			getPersonalizedFun() {
				getPersonalized().then((data) => {
					console.log(data);
					this.dataList = data.result
				});
			},
		},
	};
</script>

<style lang="less">
	.studio {
		width: 100%;

		.studiohead {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #fff;
			text-align: center;
			display: flex;
			padding: 8px 0px;
			box-sizing: border-box;
			text-align: center;

			.iconfont {
				flex: 0 0 30px;
			}

			p {
				flex: 1;
				padding-right: 30px;
				text-align: center;
			}
		}

		.studioContent {
			ul {
				padding: 10px;

				li {
					display: flex;
					margin-bottom: 15px;

					.img {
						width: 80px;
						height: 80px;
						padding-right: 10px;

						img {
							width: 80px;
							height: 80px;
						}
					}

					.font {
						margin: 8px 0;

						p {
							font-size: 16px;
							margin-bottom: 5px;
							color: #333;
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 1;
							// 5、溢出隐藏：
							overflow: hidden;
						}

						span {
							font-size: 14px;
							color: #aaa;
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 2;
							// 5、溢出隐藏：
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
